<template>
	<a-form-item
		:class="{
			[slotClass ? slotClass : '']: true,
			'app-control-form__item': true,
			[`app-control-form__item--${labelPos.toLowerCase()}`]: true,
			[`app-control-form__item__${name}`]: true,
			[`anchor__${name}`]: enableAnchor,
		}"
		:colon="false"
		:style="slotStyle"
		:name="name"
		:rules="rules"
		:help="error"
		:labelCol="{ style: { width: formItemLabelWidth } }"
	>
		<template #label v-if="showLabel && !emptyCaption && labelPos !== 'NONE'">
			<a-tooltip>
				<template #title v-if="showTip">
					{{ label }}
				</template>
				<div
					ref="labelElement"
					:class="{
						[labelClass ? labelClass : '']: true,
						'app-form-item__label': true,
					}"
				>
					{{ label }}
				</div>
			</a-tooltip>
		</template>
		<slot></slot>
	</a-form-item>
</template>
<script setup lang="ts">
import { formItemProps } from '../form';
import { Ref } from 'vue';

const props = defineProps(formItemProps);

const showTip = ref(false);

const labelElement: Ref<any> = ref(null);

const handleShowTip = () => {
	const element = labelElement.value;
	if (element && props.showLabel && !props.emptyCaption) {
		if (element.scrollWidth > element.offsetWidth) {
			showTip.value = true;
		}
	}
};

const formItemLabelWidth = computed(() => {
	let labelWidth = `${props.labelWidth ? props.labelWidth : 0}px`;
	if (!props.showLabel || props.emptyCaption || props.labelPos == 'NONE') {
		labelWidth = '0px';
	}
	return labelWidth;
});

onMounted(() => {
	handleShowTip();
});
</script>
